<template>
    <div class="city-tree">
        <div class="city-item" v-for="(item) in treeList" :key="item.firstChar">
            <div class="py" v-if="cityType === 1">{{item.firstChar}}</div>
                <div class="cities">
                    <div 
                        class="city" 
                        v-for="(city, index) in item.cityList" 
                        :key="index"
                        @click="handleClick(city)"
                    >
                        <div class="parent" :class="{active: city.showChildren}">
                            <text class="city-name">{{city.cityName}}</text>
                            <div v-if="cityType === 1">
                                <image v-show="!city.showChildren" class="arrow" src="@/static/icon-pack.png"></image>
                                <image v-show="city.showChildren" class="arrow" src="@/static/icon-pack-active.png"></image>
                            </div>
                        </div>
                        <div v-if="cityType === 1 && city.showChildren" class="children">
                            <text 
                                class="child" 
                                v-for="(school) in city.children" 
                                :key="school.id"
                                @click.stop="$emit('selected', school)"
                            >
                                {{school.schoolName}}
                            </text>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
    import { apiGetAllCentersByCity } from '@/api/memory'
    export default {
        props: {
            list: {
                type: Array,
                default: []
            },
            cityType: {
                type: Number,
                default: 1
            }
        },
        data(){
            return {
                treeList: [],
                schoolData: []

            }
        },
        watch: {
            list: {
                deep: true,
                immediate: true,
                handler(val){
                    this.treeList = val || []
                }
            }
        },
        methods: {
            async handleClick(city){
                if(this.cityType == 1){ // 国内
                    this.treeList.forEach(item => {
                        item.cityList.forEach(i => {
                            if(city.cityName === i.cityName){
                                city.showChildren = !city.showChildren
                            }else{
                                i.showChildren = false
                            }
                        })
                    })
                    if(city.showChildren){
                        try {
                            const data = await this.getCityData(city.cityName)
                            city.children = data
                        } catch (error) {
                            console.log(error)
                        }
                    }
                }else { // 国外
                    this.$emit('selected', city)
                }
            },
            // 城市的学校
            getCityData(cityName){
                return apiGetAllCentersByCity({cityName}).then(res => {
                    if(res.code == 200){
                        return Promise.resolve(res.data)
                    }
                }).catch(err => {
                    console.log(err, 'err')
                })
            },
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .city-tree{
        width: 100%;
        .city-item{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            margin-bottom: toRem(30);
            .py{
                font-size: toRem(24);
                font-weight: 500;
                color: #333;
                margin-bottom: toRem(20);
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
        .cities{
            width: 100%;
        }
        .city{
            margin-bottom: toRem(20);
            .parent{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: toRem(28);
                font-weight: 500;
                color: #333;
                background-color: #F6F8FC;
                border-radius: toRem(8);
                padding: toRem(28) toRem(20);
                box-sizing: border-box;
            }
            .parent.active{
                background-color: rgba(253, 69, 61, .08);
                color: #FD453D;
            }
            .arrow{
                width: toRem(20);
                height: toRem(12);
            }
            .children{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding-left: toRem(20);
                box-sizing: border-box;
                margin-top: toRem(29);
                margin-bottom: toRem(30);
                .child{
                    margin-bottom: toRem(57);
                    color: #333;
                    font-size: toRem(24);
                    width: 100%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;

                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }
            &:last-child{
                margin-bottom: 0;
            }
        }

    }
 
</style>
